<template>
  <div class="container">
    <div class="select-container">
      <el-input
        size="small"
        style="width: 200px;"
        class="filter-item"
        placeholder="输入岗位名称"
        clearable
        @change="title_change"
        prefix-icon="el-icon-search"
      >
      </el-input>
      <el-input
        size="small"
        style="width: 200px;"
        class="filter-item"
        placeholder="输入岗位英文名称"
        clearable
        @change="entitle_change"
        prefix-icon="el-icon-search"
      >
      </el-input>
    </div>
    <div class="list-container">
      <div class="filter">
        <el-row :gutter="20">
          <el-col :span="10">
            <span style="line-height: 33px;padding-left:10px;">岗位列表</span>
          </el-col>
          <el-col :span="14" style="text-align: right;">
            <el-button size="small" type="primary" @click="createClick()" style="margin-right: 10px">创建岗位</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="data-contant">
        <div>
          <el-table
            :key='tableKey'
            :data="list.records"
            v-loading="listLoading"
            element-loading-text="给我一点时间"
            size="small"
            stripe
            style="width: 100%;"
            highlight-current-row>
            <el-table-column
              align="center"
              type="index"
              width="80"
              label="编号"
            >
            </el-table-column>
            <el-table-column
              align="center"
              label="岗位名称"
              prop="name"
            >
            </el-table-column>

            <el-table-column
              align="center"
              label="岗位名称英文"
              prop="nameEn"
            >
            </el-table-column>
            <el-table-column
              align="center"
              label="岗位等级"
              prop="grade"
            >
            </el-table-column>
            <el-table-column
              align="center"
              label="最后修改人"
              prop="lmUser"
            >
            </el-table-column>
            <el-table-column align="center" label="操 作" width="220px" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button style="width:24px; margin-left:-36px;" type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button style="width:24px;" type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
                <el-button style="width:24px;" type="text" size="small" @click="deploy(scope.row)">配置岗位人员</el-button>

              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-container">
            <el-pagination
              layout=" total, prev, pager, next"
              :page-size = "this.postList.rowBounds.limit"
              :total="this.list.count"
              @current-change="current_change"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="添加岗位"  :visible="dappendVisible" :before-close="dappendClose">
      <el-form :model="appendlist" label-position="top" size="small" ref="appendlist" :rules="appendrules" label-width="110px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="岗位名称" prop="name">
              <el-input v-model="appendlist.name" placeholder="岗位名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户名称英文" prop="nameEn">
              <el-input v-model="appendlist.nameEn" onKeyUp="value=value.replace(/[\W]/g,'')" placeholder="用户名称英文"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="岗位简称" prop="shortName">
              <el-input v-model="appendlist.shortName" placeholder="岗位简称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="岗位编码" prop="code">
              <el-input v-model="appendlist.code" placeholder="岗位编码"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="岗位类型" prop="type">
              <el-input v-model="appendlist.type" placeholder="岗位类型"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="岗位等级" prop="grade">
              <el-input v-model="appendlist.grade" placeholder="岗位等级"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="是否内建岗位" prop="innerFlag">
              <el-select v-model="appendlist.innerFlag" clearable placeholder="是否内建岗位">
                <el-option
                  v-for="item in innerFlagOptions"
                  :key="item.type"
                  :label="item.value"
                  :value="item.type">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="岗位状态" prop="status">
              <el-select v-model="appendlist.status" clearable placeholder="岗位状态">
                <el-option
                  v-for="item in typeOptions"
                  :key="item.type"
                  :label="item.value"
                  :value="item.type">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="岗位描述" prop="remarks">
              <el-input type="textarea" v-model="appendlist.remarks" placeholder="岗位描述"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">

          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelCreateSubmit('appendlist')">取 消</el-button>
        <el-button type="primary" @click="createSubmit('appendlist')">保 存</el-button>
      </div>
    </el-dialog>
    <el-dialog title="子系统编辑"  :visible="updateVisible" :before-close="updateClose">
      <el-form :model="updatelist" label-position="top" size="small" ref="updatelist" :rules="appendrules" label-width="110px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="岗位名称" prop="name">
              <el-input v-model="updatelist.name" placeholder="岗位名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户名称英文" prop="nameEn">
              <el-input v-model="updatelist.nameEn" onKeyUp="value=value.replace(/[\W]/g,'')" placeholder="用户名称英文"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="岗位简称" prop="shortName">
              <el-input v-model="updatelist.shortName" placeholder="岗位简称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="岗位编码" prop="code">
              <el-input v-model="updatelist.code" placeholder="岗位编码"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="岗位类型" prop="type">
              <el-input v-model="updatelist.type" placeholder="岗位类型"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="岗位等级" prop="grade">
              <el-input v-model="updatelist.grade" placeholder="岗位等级"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="是否内建岗位" prop="innerFlag">
              <el-select v-model="updatelist.innerFlag" clearable placeholder="是否内建岗位">
                <el-option
                  v-for="item in innerFlagOptions"
                  :key="item.type"
                  :label="item.value"
                  :value="item.type">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="岗位状态" prop="status">
              <el-select v-model="updatelist.status" clearable placeholder="岗位状态">
                <el-option
                  v-for="item in typeOptions"
                  :key="item.type"
                  :label="item.value"
                  :value="item.type">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="岗位描述" prop="remarks">
              <el-input type="textarea" v-model="updatelist.remarks" placeholder="岗位描述"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">

          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelUpdateSubmit('updatelist')">取 消</el-button>
        <el-button type="primary" @click="updateSubmit('updatelist')">保 存</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="配置岗位人员"
      :visible="deployVisible"
      :before-close="deployClose"
      width="80%"
    >
      <JobUser :orgid="orgid" :count="count" :groupId="groupId" :selectValue="selectValue"/>
    </el-dialog>
  </div>
</template>

<script>
  import '@/styles/newstyle.scss'
  import JobUser from './jobUser'
  const nameCondition = {
    'property': 'name',
    'value': '',
    'type': 'LIKE'
  }
  const ennameCondition = {
    'property': 'nameEn',
    'value': '',
    'type': 'LIKE'
  }
  export default {
    props: [
      'orgid'
    ],
    components: {
      JobUser
    },
    data() {
      const checkTitle = (rule, value, callback) => {
        if (!value) {
          callback(new Error('岗位名称不能为空！'))
        } else if (value.length > 128) {
          callback(new Error('长度在 1 到 128 个字符'))
        } else {
          callback()
        }
      }
      return {
        deployVisible: false,
        dappendVisible: false,
        updateVisible: false,
        tableKey: 0,
        list: {},
        postList: {
          condition: [
            {
              'property': 'status',
              'value': '2',
              'type': 'NE'
            }
          ],
          sort: [{
            direction: 'DESC',
            property: 'fcTime'
          }],
          rowBounds: {
            offset: 0,
            limit: 10
          }
        },
        typeOptions: [
          {
            type: '0',
            value: '活动'
          },
          {
            type: '1',
            value: '禁用'
          },
          {
            type: '2',
            value: '删除'
          }
        ],
        innerFlagOptions: [
          {
            type: '0',
            value: '否'
          },
          {
            type: '1',
            value: '是'
          }
        ],
        listLoading: false,
        fliter: [
          Object.assign({}, nameCondition),
          Object.assign({}, ennameCondition)
        ],
        appendlist: {
          'orgId': '',
          'name': '',
          'nameEn': '',
          'shortName': '',
          'code': '',
          'type': '',
          'grade': '',
          'remarks': '',
          'innerFlag': '',
          'status': ''
        },
        appendrules: {
          name: [
            { validator: checkTitle, required: true, trigger: 'blur' }
          ],
          nameEn: [
            { message: '用户名称英文不能为空', required: true, trigger: 'blur' },
            { min: 1, max: 128, message: '长度在 1 到 128 个字符', trigger: 'blur' }
          ],
          shortName: [
            { required: false, trigger: 'blur' },
            { min: 1, max: 128, message: '长度在 1 到 128 个字符', trigger: 'blur' }
          ],
          code: [
            { required: false, trigger: 'blur' },
            { min: 1, max: 128, message: '长度在 1 到 128 个字符', trigger: 'blur' }
          ],
          type: [
            { required: false, trigger: 'blur' },
            { min: 1, max: 4, message: '长度在 1 到 4 个字符', trigger: 'blur' }
          ],
          grade: [
            { required: false, trigger: 'blur' },
            { min: 1, max: 4, message: '长度在 1 到 4 个字符', trigger: 'blur' }
          ],
          remarks: [
            { required: false, trigger: 'blur' },
            { min: 1, max: 256, message: '长度在 1 到 256 个字符', trigger: 'blur' }
          ],
          innerFlag: [
            { required: false, trigger: 'blur' }
          ],
          status: [
            { required: false, trigger: 'blur' }
          ]
        },
        updatelist: {},
        updaterules: {
          name: [
            { validator: checkTitle, required: true, trigger: 'blur' }
          ],
          nameEn: [
            { message: '用户名称英文不能为空', required: true, trigger: 'blur' },
            { min: 1, max: 128, message: '长度在 1 到 128 个字符', trigger: 'blur' }
          ],
          shortName: [
            { required: false, trigger: 'blur' },
            { min: 1, max: 128, message: '长度在 1 到 128 个字符', trigger: 'blur' }
          ],
          code: [
            { required: false, trigger: 'blur' },
            { min: 1, max: 128, message: '长度在 1 到 128 个字符', trigger: 'blur' }
          ],
          type: [
            { required: false, trigger: 'blur' },
            { min: 1, max: 4, message: '长度在 1 到 4 个字符', trigger: 'blur' }
          ],
          grade: [
            { required: false, trigger: 'blur' },
            { min: 1, max: 4, message: '长度在 1 到 4 个字符', trigger: 'blur' }
          ],
          remarks: [
            { required: false, trigger: 'blur' },
            { min: 1, max: 256, message: '长度在 1 到 256 个字符', trigger: 'blur' }
          ],
          innerFlag: [
            { required: false, trigger: 'blur' }
          ],
          status: [
            { required: false, trigger: 'blur' }
          ]
        },
        deletelist: {},
        count: 0,
        selectValue: 1,
        groupId: ''
      }
    },
    // 画面刚进入method
    created() {
      this.fetchData()
    },
    watch: {
      orgid(n, o) {
        if (n) {
          this.fetchData()
        }
      }
    },
    methods: {
      fetchData() {
        this.loading = true
        this.postList.orgId = this.orgid
        this.$store.dispatch('SysGroupselect', this.postList).then(res => {
          this.list = res.data
          this.loading = false
        }).catch((err) => {
          console.log(err)
        })
      },
      appendData() {
        this.$store.dispatch('SysGroupInsert', this.appendlist).then(res => {
          this.fetchData()
          this.$refs['appendlist'].resetFields()
        }).catch((err) => {
          console.log(err)
        })
      },
      updateData() {
        this.$store.dispatch('SysGroupUpdate', this.updatelist).then(res => {
          this.fetchData()
          this.$refs['updatelist'].resetFields()
        }).catch((err) => {
          console.log(err)
        })
      },
      deleteData() {
        this.$store.dispatch('SysGroupDelete', this.deletelist).then(res => {
          this.fetchData()
        }).catch((err) => {
          console.log(err)
        })
      },
      handleDelete(row) {
        this.$confirm('是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deletelist.id = row.id
          this.deleteData()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      createClick() {
        this.appendlist.orgId = this.orgid
        this.dappendVisible = true
      },
      handleEdit(row) {
        this.updatelist = {
          'id': row.id,
          'orgId': row.orgId,
          'name': row.name,
          'nameEn': row.nameEn,
          'shortName': row.shortName,
          'code': row.code,
          'type': row.type,
          'grade': row.grade,
          'remarks': row.remarks,
          'innerFlag': row.innerFlag,
          'status': row.status
        }
        this.updateVisible = true
      },
      /* 添加dialog*/
      dappendClose() {
        this.dappendVisible = false
      },
      createSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // console.log(this.appendlist)
            this.appendData()
            this.$message({
              type: 'success',
              message: '创建成功!'
            })
            this.dappendVisible = false
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      cancelCreateSubmit(formName) {
        this.$refs[formName].resetFields()
      },
      /* 编辑dialog*/
      updateClose() {
        this.updateVisible = false
      },
      updateSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // console.log(this.appendlist)
            this.updateData()
            this.$message({
              type: 'success',
              message: '编辑成功!'
            })
            this.updateVisible = false
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      cancelUpdateSubmit(formName) {
        this.$refs[formName].resetFields()
      },
      current_change(currentPage) { // 通过分页获取数据
        const page = currentPage - 1
        this.postList.rowBounds.offset = page * 10
        this.fetchData()
      },
      title_change(type) { // 分类数据
        if (type === null) {
          const nullfliter = this.fliter.concat()
          const condition = []
          for (let i = 0; i < nullfliter.length; i++) {
            if (nullfliter[i].property === 'name') {
              nullfliter.splice(i, 1)
              this.fliter[i].value = ''
            }
          }
          for (let i = 0; i < nullfliter.length; i++) {
            if (nullfliter[i].value === '') {
              continue
            }
            condition.push(nullfliter[i])
          }
          this.postList.condition = condition
          this.postList.rowBounds = {
            'offset': 0,
            'limit': 10
          }
          this.fetchData()
        } else {
          const conditionTimefliter = this.fliter.concat()
          const condition = []
          for (let i = 0; i < conditionTimefliter.length; i++) {
            if (conditionTimefliter[i].property === 'name') {
              conditionTimefliter[i].value = type
              this.fliter[i].value = type
            }
          }
          for (let i = 0; i < conditionTimefliter.length; i++) {
            if (conditionTimefliter[i].value === '') {
              continue
            }
            condition.push(conditionTimefliter[i])
          }
          this.postList.condition = condition
          this.postList.rowBounds = {
            'offset': 0,
            'limit': 10
          }
          this.fetchData()
        }
      },
      entitle_change(type) { // 分类数据
        if (type === null) {
          const nullfliter = this.fliter.concat()
          const condition = []
          for (let i = 0; i < nullfliter.length; i++) {
            if (nullfliter[i].property === 'nameEn') {
              nullfliter.splice(i, 1)
              this.fliter[i].value = ''
            }
          }
          for (let i = 0; i < nullfliter.length; i++) {
            if (nullfliter[i].value === '') {
              continue
            }
            condition.push(nullfliter[i])
          }
          this.postList.condition = condition
          this.postList.rowBounds = {
            'offset': 0,
            'limit': 10
          }
          this.fetchData()
        } else {
          const conditionTimefliter = this.fliter.concat()
          const condition = []
          for (let i = 0; i < conditionTimefliter.length; i++) {
            if (conditionTimefliter[i].property === 'nameEn') {
              conditionTimefliter[i].value = type
              this.fliter[i].value = type
            }
          }
          for (let i = 0; i < conditionTimefliter.length; i++) {
            if (conditionTimefliter[i].value === '') {
              continue
            }
            condition.push(conditionTimefliter[i])
          }
          this.postList.condition = condition
          this.postList.rowBounds = {
            'offset': 0,
            'limit': 10
          }
          this.fetchData()
        }
      },
      deploy(row) {
        this.count += 1
        this.groupId = row.id
        // console.log(this.orgid)
        this.deployVisible = true
      },
      deployClose() {
        this.selectValue = 1
        this.deployVisible = false
      }
    }
  }
</script>

<style scoped>
  .container{
    padding: 20px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .select-container{
    padding: 10px 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    border: 1px solid#e4e7ed;
  }
  .list-container{
    margin-top:30px;
    padding:0 10px 10px 10px;
    border:1px solid#e4e7ed;
    border-radius: 4px;
  }
  .data-contant{
    padding: 30px 10px 20px;
  }
  .data-detail{
    font-size: 14px;
    padding:20px 0;
    text-align: center;
  }
  .data-title{
    font-size: 14px;
    padding:10px 0;
    text-align: center;
  }
  .data-title div{
    font-size: 14px;
    padding:5px 0;
  }
  .filter{
    padding: 10px 5px;
    border-bottom: 2px solid#e4e7ed;
  }
  .list-container{
  }
  .bold{
    font-weight: bold;
  }
</style>
